<template>
  <div class="userManagement-container view flex-row">
    <div
      class="m-r-15 minw300"
      style="border: 1px solid #ebeef5; padding: 10px; border-radius: 5px"
    >
      <el-button
        :type="isCheck ? 'primary' : ''"
        class="m-b-10"
        size="mini"
        :icon="isCheck ? 'el-icon-star-on' : 'el-icon-star-off'"
        @click="checkToGroup"
      >
        总分组
      </el-button>
      <tree
        :nodes="nodes"
        ref="treeAuth"
        @onClick="selectTree"
        :setting="setting"
        @onCreated="handleCreated"
      />
    </div>

    <div class="width100">
      <el-form :inline="true" :model="queryForm" @submit.native.prevent>
        <el-form-item label="开始时间">
          <el-date-picker
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="queryForm.startday"
            type="datetime"
            placeholder="选择开始日期时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryForm.endday"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="datetime"
            placeholder="选择结束日期时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="fetchData">
            查询
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="expor">导出</el-button>
        </el-form-item>
      </el-form>
      <el-card shadow="never" class="box-card" :body-style="{ padding: '0px' }">
        <div slot="header" class="clearfix">
          <span>成交记录</span>
        </div>

        <el-table
          v-loading="listLoading"
          :data="tableData"
          style="width: calc(100vw - 475px)"
        >
          <el-table-column prop="uid" label="uid"></el-table-column>
          <el-table-column prop="nickname" label="昵称"></el-table-column>
          <el-table-column prop="username" label="账号"></el-table-column>
          <el-table-column prop="ordernum" label="订单编号"></el-table-column>
          <el-table-column
            prop="positionnum"
            label="成交价格"
          ></el-table-column>
          <el-table-column prop="pricetype" label="下单类型">
            <template #default="{ row }">
              <div>
                {{ getType(row) }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="volume" label="持仓数"></el-table-column>
          <el-table-column prop="contract" label="合约编号"></el-table-column>
          <el-table-column prop="codename" label="合约名称"></el-table-column>

          <el-table-column prop="cmd" label="方向">
            <template #default="{ row }">
              <div>
                {{ row.risefall == 'rise' ? '买' : '卖' }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="volume" label="下单数量"></el-table-column>
          <el-table-column prop="playprice" label="持仓价"></el-table-column>
          <el-table-column prop="yk" label="持仓盈亏"></el-table-column>
          <el-table-column
            prop="stop_loss_price"
            label="止损"
          ></el-table-column>
          <el-table-column
            prop="stop_profit_price"
            label="止盈"
          ></el-table-column>
          <el-table-column prop="margin" label="保证金"></el-table-column>
          <el-table-column prop="fee" label="手续费"></el-table-column>
          <el-table-column prop="rate" label="币种"></el-table-column>
          <el-table-column prop="rate" label="成交时间">
            <template #default="{ row }">
              <div>
                {{ $dayjs.unix(row.updatetime).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="queryForm.page"
          :layout="layout"
          :page-size="20"
          :total="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
  import {
    getList,
    doDelete,
    getUserlist,
    userfunds,
    exportData,
    onlineorders,
    wtorders,
    dsfunds,
    okorders,
  } from '@/api/userManagement'
  import { getGrouplist } from '@/api/ad'
  import Edit from './components/UserManagementEdit'
  import tree from 'vue-giant-tree'
  export default {
    name: 'ReportManagement',
    components: { Edit, tree },
    data() {
      return {
        activeName: '1',
        isCheck: false,
        list: null,
        value1: '',
        nodes: [],
        grouplist: [],
        ztreeObj: null,
        setting: {
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: false,
          },
        },
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
        cities: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '广州',
          },
        ],
        options: [
          {
            value: 1,
            label: '逐笔',
          },
          {
            value: 2,
            label: '盯市',
          },
        ],
        isCheck: false,
        tableData1: [
          {
            col1: '日盈亏',
            name: '',
            address: '',
            rmb: 0,
          },
          {
            col1: '手续费',
            name: '',
            address: '',
            rmb: 0,
          },
          {
            col1: '浮动盈亏',
            name: '',
            address: '',
            rmb: 0,
          },
          {
            col1: '冻结保证金',
            name: '',
            address: '',
            rmb: 0,
          },
        ],

        tableData: [],
        listLoading: false,
        layout: 'total, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        groupid: 1,
        queryForm: {
          startday: '',
          endday: '',
          extype: 4,
          page: 1,
          uid: '',
          isall: '0',
        },
      }
    },
    created() {
      this.getGroupListData()
      this.fetchData()
    },
    methods: {
      async expor() {
        this.queryForm.isall = this.isCheck ? '1' : '0'
        let loadingInstance = this.$loading({ fullscreen: true })
        const res = await exportData(this.queryForm)
        loadingInstance.close()
        if (res.code == 1) {
          window.open(res.data.downurl)
        } else {
          this.$baseMessage(res.msg, 'error')
        }
      },
      checkToGroup() {
        this.isCheck = !this.isCheck
        this.fetchData()
      },
      getUserfunds() {
        userfunds(this.queryForm)
          .then((res) => {
            this.tableData1[0].rmb = res.data.dayyk
            this.tableData1[1].rmb = res.data.feeall
            this.tableData1[2].rmb = res.data.floatyk
            this.tableData1[3].rmb = res.data.freezemargin
          })
          .catch((ret) => {})
      },
      selectTree() {
        this.isCheck = false
        let node = this.ztreeObj.getSelectedNodes()[0]
        if (typeof node.id == 'string' && node.id.indexOf('userid_') > -1) {
          this.queryForm.group_id = ''
          this.queryForm.uid = node.id.replace('userid_', '')
          this.fetchData()
          return false
        } else {
          this.queryForm.uid = ''
          this.queryForm.group_id = node.id
          this.fetchData()
          return false
        }
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      changeTab() {
        this.fetchData()
      },
      handleCreated: function (ztreeObj) {
        this.ztreeObj = ztreeObj
        ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
        if (this.ztreeObj.getNodes()[0]) {
          if (this.ztreeObj.getNodes()[0]) {
            let it = this.ztreeObj.getNodes()[0]
            this.queryForm.group_id = it.id
            if (it) {
              this.ztreeObj.selectNode(it, true)
            }
          }

          this.fetchData()
        }
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      getType(row) {
        if (row.pricetype == 1) {
          return '快捷下单'
        } else if (row.pricetype == 2) {
          return '三键下单'
        } else {
          return '传统下单'
        }
      },
      getGroupListData() {
        getGrouplist({})
          .then((res) => {
            this.nodes = res.data.map((item, index) => {
              let datac = {}
              if (index == 0) {
                datac.pid = 0
                datac.open = true
              }
              datac.id = item.id
              datac.name = item.gname
              return datac
            })
            this.grouplist = res.data
            this.getUsers()
          })
          .catch((ret) => {})
      },
      async getUsers() {
        this.grouplist.forEach(async (dc) => {
          const res = await getUserlist({ groupid: dc.id })
          const maps = res.data.map((item) => {
            item.name = item.username
            item.id = `userid_${item.id}`
            item.pid = dc.id
            item.url = ''
            return item
          })
          this.nodes.push(...maps)
        })
      },
      // async getUsers() {
      //   for (let i = 0; i < this.grouplist.length; i++) {
      //     const res = await getUserlist({ groupid: this.grouplist[i].id })
      //     this.$set(this.grouplist[i], 'child', res.data)
      //   }
      // },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success')
              this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.page = 1
        this.fetchData()
      },
      getChichang() {
        this.listLoading = true
        this.queryForm.isall = this.isCheck ? '1' : '0'
        okorders(this.queryForm)
          .then((res) => {
            this.listLoading = false
            this.tableData = res.data.list
            this.total = res.data.total
          })
          .catch((ret) => {
            this.listLoading = false
          })
      },
      getWT() {
        wtorders(this.queryForm)
          .then((res) => {
            this.tableData = res.data
          })
          .catch((ret) => {})
      },
      getChuRuJin() {
        dsfunds(this.queryForm)
          .then((res) => {
            this.tableData = res.data
          })
          .catch((ret) => {})
      },
      async fetchData() {
        this.getChichang()
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .report-content {
    .el-tabs__header {
      margin-bottom: 0 !important;
    }
  }
  ::v-deep .box-card-outer {
    border-top: 0 !important;
    .el-card {
      border-top: 0 !important;
    }
  }
  ::v-deep .box-card-no-padding {
    .el-card__body {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .minw300 {
    min-width: 100px;
  }
</style>
